<template>
  <view class="smart-markdown" :style="{ width: `${width}%`, height: `${height}rpx` }" v-html="mdText"></view>
</template>

<script>
import MarkdownIt from 'markdown-it'

export default {
  name: 'SmartMarkdown',
  props: {
    content: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      mdText: '',
      md: null,
    }
  },
  created() {
    this.md = new MarkdownIt()
    this.renderMarkdown()
  },
  watch: {
    content(newVal) {
      this.renderMarkdown()
    },
  },
  methods: {
    renderMarkdown() {
      if (this.content && this.md) {
        this.mdText = this.md.render(this.content)
      }
    },
  },
}
</script>

<style scoped>
.smart-markdown {
  overflow: auto;
}
</style>
